<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Horizontal Tree Structure</title>  
    <style>  
        .tree {  
            display: flex;  
            flex-direction: row;  
            align-items: center;  
            margin-bottom: 10px;  
        }  
  
        .tree-node {  
            border: 1px solid #ccc;  
            padding: 5px 10px;  
            margin-right: 10px;  
            background-color: #f9f9f9;  
            position: relative;  
        }  
  
        .tree-node::after {  
            content: '';  
            position: absolute;  
            right: -10px;  
            top: 50%;  
            transform: translateY(-50%);  
            border-top: 1px solid #ccc;  
            width: 10px;  
        }  
  
        /* 移除最右边节点的连接线 */  
        .tree-node:last-child::after {  
            display: none;  
        }  
  
        /* 递归时添加的缩进（可选） */  
        .tree-indent {  
            margin-left: 20px;  
        }  
  
        /* 注意：这里的缩进是为了示例，实际横向树可能不需要 */  
    </style>  
</head>  
<body>  
    <div id="tree-container"></div>  
  
    <script src="tree.js"></script>  
</body>  
</html>